<!DOCTYPE html>
<html>
<head>
  <title>Hammer.js Test</title>
  <!--
  <script src="../../src/kekule.js"></script>
  -->
  <script src="../_libs/hammer.js"></script>
  <style>
    #divLog
    {
      float: right;
      overflow-y: scroll;
      background-color: yellow;
    }
  </style>
</head>
<body>

<div id="divLog" style="width:500px;"></div>
<div id="div1" style="width:500px;height:1000px;background-color:green;border:1px solid red">DIV</div>

<script>
  var elem = document.body; //document.getElementById('div1');
  var hammertime = Hammer(elem);

  function log()
  {
  	var msg = '';
  	for (var i = 0, l = arguments.length; i < l; ++i)
    {
    	var a = arguments[i];
    	var s = a.toString();
    	msg += ' ' + s;
    }
  	var elem = document.createElement('div');
  	elem.innerHTML = msg;
  	document.getElementById('divLog').appendChild(elem);
  	console.log.apply(console, arguments);
  }

  hammertime.get('pinch').set({ enable: true });
  hammertime.get('rotate').set({ enable: true });

  hammertime.on('touch', function(e)
    {
      log('touch', e);
    }
  );

  hammertime.on('pinch', function(e)
    {
      log('pinch', e);
      //e.gesture.preventDefault();
    }
  );

  hammertime.on('rotate', function(e)
    {
      log('rotate', e);
    }
  );
  hammertime.on('rotatestart', function(e)
    {
      log('rotatestart', e);
    }
  );
  hammertime.on('rotateend', function(e)
    {
      log('rotateend', e);
    }
  );
  hammertime.on('drag', function(e)
    {
      log('drag', e);
      //e.gesture.preventDefault();
    }
  );
  hammertime.on('tap swipe', function(e)
    {
      log('swipe or tap on', e);
      //e.gesture.preventDefault();
    }
  );
</script>

</body>
</html>